/**
 * 地图组件样式文件
 * @description 定义地图容器的布局和样式
 */

/* 地图主容器 */
.custom_hidden_mapbox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的内容 */

  /* 地图容器包装器 */
  .custom_map_container {
    width: 100%;
    /* 高度增加30px以确保完整显示，避免底部工具栏被遮挡 */
    height: calc(100% + 30px);

    /* Mars3D地图渲染区域 */
    .cesiumMap {
      width: 100%;
      height: 100%;
      /* 确保地图容器获得焦点，支持键盘交互 */
      outline: none;
      
      /* 禁用默认的文本选择，提升地图交互体验 */
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      
      /* 禁用默认的拖拽行为 */
      -webkit-user-drag: none;
      -khtml-user-drag: none;
      -moz-user-drag: none;
      -o-user-drag: none;
      
      /* 确保地图在高DPI屏幕上清晰显示 */
      image-rendering: -webkit-optimize-contrast;
      image-rendering: optimize-contrast;
      
      /* WebGL渲染优化 */
      canvas {
        outline: none;
        /* 确保画布填满容器 */
        width: 100% !important;
        height: 100% !important;
      }
    }
  }
}

/* 响应式设计 - 移动端适配 */
@media screen and (max-width: 768px) {
  .custom_hidden_mapbox {
    .custom_map_container {
      /* 移动端调整高度补偿值 */
      height: calc(100% + 40px);
    }
  }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .custom_hidden_mapbox {
    .custom_map_container {
      .cesiumMap {
        /* 高DPI屏幕下的图像渲染优化 */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
      }
    }
  }
}

/* 控件按钮基础样式 */
.mars3d-custom-control-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 6px 8px;
  margin: 2px;
  background-color: rgba(42, 42, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  user-select: none;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }
  
  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    
    &:hover {
      background-color: rgba(42, 42, 42, 0.8);
      border-color: rgba(255, 255, 255, 0.2);
      transform: none;
      box-shadow: none;
    }
  }
}

/* 图标容器样式 */
.mars3d-icon-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  
  /* 字体图标样式 */
  i {
    font-size: 14px;
    line-height: 1;
    color: inherit;
  }
  
  /* 图片图标样式 */
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(1);
    transition: filter 0.2s ease;
  }
}

/* 特定控件按钮样式 */
.mars3d-zoom-in-btn,
.mars3d-zoom-out-btn,
.mars3d-zoom-home-btn {
  .mars3d-icon-container i {
    font-size: 16px;
    font-weight: bold;
  }
}

.mars3d-fullscreen-btn,
.mars3d-exit-fullscreen-btn {
  .mars3d-icon-container i {
    font-size: 15px;
  }
}

.mars3d-scene-3d-btn,
.mars3d-scene-2d-btn,
.mars3d-scene-cv-btn {
  .mars3d-icon-container i {
    font-size: 14px;
  }
}

.mars3d-compass-btn {
  border-radius: 50%;
  min-width: 36px;
  min-height: 36px;
  
  .mars3d-icon-container i {
    font-size: 18px;
  }
}

.mars3d-layer-picker-btn {
  .mars3d-icon-container i {
    font-size: 15px;
  }
}

/* 测量工具按钮样式 */
.mars3d-measure-distance-btn,
.mars3d-measure-area-btn,
.mars3d-measure-height-btn {
  background-color: rgba(0, 123, 255, 0.8);
  
  &:hover {
    background-color: rgba(0, 123, 255, 1);
  }
  
  .mars3d-icon-container i {
    font-size: 14px;
  }
}

/* 绘制工具按钮样式 */
.mars3d-draw-point-btn,
.mars3d-draw-polyline-btn,
.mars3d-draw-polygon-btn,
.mars3d-draw-rectangle-btn,
.mars3d-draw-circle-btn {
  background-color: rgba(40, 167, 69, 0.8);
  
  &:hover {
    background-color: rgba(40, 167, 69, 1);
  }
  
  .mars3d-icon-container i {
    font-size: 14px;
  }
}

/* 清除按钮样式 */
.mars3d-clear-btn {
  background-color: rgba(220, 53, 69, 0.8);
  
  &:hover {
    background-color: rgba(220, 53, 69, 1);
  }
  
  .mars3d-icon-container i {
    font-size: 14px;
  }
}

/* 控件组样式 */
.mars3d-control-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  backdrop-filter: blur(5px);
}

.mars3d-control-group-horizontal {
  flex-direction: row;
}

/* 控件面板样式 */
.mars3d-control-panel {
  position: absolute;
  z-index: 1000;
  padding: 8px;
  background-color: rgba(42, 42, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  
  &.top-left {
    top: 10px;
    left: 10px;
  }
  
  &.top-right {
    top: 10px;
    right: 10px;
  }
  
  &.bottom-left {
    bottom: 10px;
    left: 10px;
  }
  
  &.bottom-right {
    bottom: 10px;
    right: 10px;
  }
}

/* 图标加载状态 */
.mars3d-icon-loading {
  .mars3d-icon-container {
    &::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top: 2px solid #ffffff;
      border-radius: 50%;
      animation: mars3d-spin 1s linear infinite;
    }
    
    i, img {
      opacity: 0;
    }
  }
}

@keyframes mars3d-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式控件样式 */
@media screen and (max-width: 768px) {
  .mars3d-custom-control-btn {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    font-size: 16px;
  }
  
  .mars3d-compass-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  .mars3d-control-panel {
    padding: 12px;
  }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
  .mars3d-custom-control-btn {
    background-color: #000000;
    border-color: #ffffff;
    color: #ffffff;
    
    &:hover {
      background-color: #333333;
    }
  }
}

/* 减少动画模式支持 */
@media (prefers-reduced-motion: reduce) {
  .mars3d-custom-control-btn,
  .mars3d-icon-container img,
  .mars3d-icon-loading .mars3d-icon-container::after {
    transition: none;
    animation: none;
  }
}

/* Mars3D 控件图标初始化配置样式 */

/* 基础控件容器样式 */
.cesium-viewer .cesium-toolbar-button {
  background-color: rgba(42, 42, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  transition: all 0.2s ease !important;
  
  &:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
  }
  
  &:active,
  &.cesium-button-pressed {
    background-color: rgba(0, 122, 255, 0.8) !important;
    border-color: rgba(0, 122, 255, 1) !important;
  }
}

/* 字体图标样式 */
.cesium-viewer {
  .cesium-toolbar-button i[class*="fa-"],
  .cesium-toolbar-button i[class*="el-icon-"],
  .cesium-toolbar-button i[class*="iconfont"] {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  
  /* 图片图标样式 */
  .cesium-toolbar-button img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    display: inline-block !important;
    vertical-align: middle !important;
    filter: brightness(0) invert(1) !important; /* 将图片转为白色 */
  }
}

/* 缩放控件特定样式 */
.cesium-viewer .cesium-navigationHelpButton-wrapper,
.cesium-viewer .cesium-zoom-controls {
  .cesium-toolbar-button:hover {
    background-color: rgba(0, 122, 255, 0.7) !important;
  }
}

/* 场景模式选择器特定样式 */
.cesium-viewer .cesium-sceneModePicker-wrapper {
  .cesium-toolbar-button:hover {
    background-color: rgba(255, 140, 0, 0.7) !important;
  }
}

/* 全屏按钮特定样式 */
.cesium-viewer .cesium-fullscreenButton-wrapper {
  .cesium-toolbar-button:hover {
    background-color: rgba(34, 139, 34, 0.7) !important;
  }
}

/* 图层选择器特定样式 */
.cesium-viewer .cesium-baseLayerPicker-wrapper {
  .cesium-toolbar-button:hover {
    background-color: rgba(128, 0, 128, 0.7) !important;
  }
}

/* 罗盘特定样式 */
.cesium-viewer .cesium-compass {
  background-color: rgba(42, 42, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  
  &:hover {
    background-color: rgba(220, 20, 60, 0.7) !important;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cesium-viewer .cesium-toolbar-button {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 8px !important;
    margin: 1px !important;
  }
  
  .cesium-viewer .cesium-toolbar-button i {
    font-size: 16px !important;
  }
  
  .cesium-viewer .cesium-toolbar-button img {
    width: 18px !important;
    height: 18px !important;
  }
}

/* 无障碍支持 */
@media (prefers-contrast: high) {
  .cesium-viewer .cesium-toolbar-button {
    border-width: 2px !important;
    border-color: #ffffff !important;
    
    &:hover {
      border-color: #ffff00 !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cesium-viewer .cesium-toolbar-button,
  .cesium-viewer .cesium-toolbar-button i,
  .cesium-viewer .cesium-toolbar-button img {
    transition: none !important;
  }
}